<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search" @tap="changeShowPopup(true)">
			<u-search bgColor="#f7f8fa" :disabled="true" :showAction="false" placeholder="请输入搜索关键词"></u-search>
			<!-- 使用弹出层 -->
			<cdPopup></cdPopup>
		</view>
		<view class="category_container">
			<view class="left">
				<view
					@tap="getCurrentCategoryInfo(item.id)"
					:class="{ menu_item: true, menu_item_active: item.id === currentCategory.id }"
					v-for="(item, index) in categoryList"
					:key="item.id"
				>
					<view class="red"></view>
					{{ item.name }}
				</view>
			</view>
			<view class="right">
				<!-- 顶部图片 -->
				<view class="banner">
					<view class="banner_text">{{ currentCategory.front_name }}</view>
					<image class="banner_img" :src="currentCategory.banner_url" alt="" />
				</view>

				<!-- 标题 -->
				<view class="mytitle">
					<view class="line"></view>
					<view class="title">{{ currentCategory.name }}</view>
				</view>

				<!-- 宫格 -->
				<u-grid :border="true" @click="click" class="mygrid">
					<u-grid-item v-for="(item, index) in currentCategory.subCategoryList" :key="index">
						<u-icon :name="item.wap_banner_url" :customStyle="{ paddingTop: 20 + 'rpx' }" :size="22"></u-icon>
						<text class="grid-text">{{ item.name }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<customTabBar></customTabBar>
	</view>
</template>

<script>
import customTabBar from '@/custom-tab-bar/index.vue';
import { ApigetCategoryData, ApigetCategoryCurrent } from '../../utils/api.js';
import { mapMutations } from 'vuex';
// 导入弹出层组件
import cdPopup from '@/components/cd-Popup/cd-Popup.vue';

export default {
	data() {
		return {
			keyword: '',
			baseList: [
				{
					name: 'photo',
					title: '图片'
				},
				{
					name: 'lock',
					title: '锁头'
				},
				{
					name: 'star',
					title: '星星'
				}
			],
			categoryList: [],
			currentCategory: {}
		};
	},

	async onLoad() {
		let res = await ApigetCategoryData();
		// console.log(res)
		if (res.errno !== 0) {
			return;
		}

		let { categoryList, currentCategory } = res.data;
		this.categoryList = categoryList;
		this.currentCategory = currentCategory;
	},
	onShow() {
		this.changevalue(2);

		// this.$store.commit('changeTabbarIndex', 2);
	},
	methods: {
		...mapMutations(['changevalue', 'changeShowPopup']),
		click(name) {
			// this.$refs.uToast.success(`点击了第${name}个`);
		},
		async getCurrentCategoryInfo(id) {
			let res = await ApigetCategoryCurrent(id);
			// console.log(res);
			if (res.errno !== 0) return;

			this.currentCategory = res.data.currentCategory;
		}
	},

	components: {
		customTabBar,
		cdPopup
	}
};
</script>

<style lang="scss">
.search {
	height: 108rpx;
	padding: 0 25rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
}
.category_container {
	display: flex;
	.left {
		background-color: #f7f8fa;
		width: 150rpx;
		height: 100vh;
		.menu_item {
			height: 120rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			.red {
				display: none;
			}
		}
		.menu_item_active {
			background-color: white;
			.red {
				width: 8rpx;
				height: 32rpx;
				background: red;
				position: absolute;
				left: 0px;
				top: 50%;
				transform: translateY(-50%);
				display: block;
			}
		}
	}
	.right {
		background-color: white;
		flex: 1;
		height: 100vh;
		margin-left: 10rpx;
		.banner {
			height: 286rpx;
			width: 90%;
			position: relative;
			margin: 0px auto;
			.banner_text {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 999;
				color: white;
			}
			.banner_img {
				width: 100%;
				box-shadow: 0 0 6px #000;
				filter: brightness(0.5);
				margin: 20rpx auto;
				display: block;
				height: 100%;
			}
		}

		.mytitle {
			position: relative;
			height: 100rpx;
			.line {
				width: 300rpx;
				height: 5rpx;
				background-color: #cccccc;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			.title {
				width: 177rpx;
				background: white;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.mygrid {
			border: 1px solid #dadbde;
			.u-grid-item {
				height: 172rpx;
			}
			.u-grid-item:last-child {
				border-right: 1px solid #dadbde;
			}
		}
	}
}
</style>
